<template>
    <a-drawer v-model:visible="visible" title="简介详情" :width="width >= 1200 ? 1200 : '100%'" :footer="false">
        <div ref="containerRef" class="detail">
            <div class="detail_content">
                <h1 class="title">{{ form?.title }}</h1>
                <div class="info">
                    <a-space>
                        <span>
                            <icon-user class="icon" />
                            <span class="label">创建人：</span>
                            <span>{{ form?.createUserString }}</span>
                        </span>
                        <a-divider direction="vertical" />
                        <span>
                            <icon-history class="icon" />
                            <span class="label">创建时间：</span>
                            <span>{{ form?.createTime }}</span>
                        </span>
                    </a-space>
                </div>
                <div style="flex: 1;">
                    <AiEditor v-model="form.content" />
                </div>
            </div>
        </div>
    </a-drawer>
</template>

<script setup lang="ts">
import { getCompanyIntroduction } from '@/apis/website/companyIntroduction';
import { useForm } from '@/hooks';
import { useWindowSize } from '@vueuse/core';
import AiEditor from './components/detail/index.vue';

const { form, resetForm } = useForm({

})
const { width } = useWindowSize()
const visible = ref(false)
const dataId = ref('')


//打开详情
const onDetail = async (id: string) => {
    dataId.value = id
    
    resetForm()

    const res = await getCompanyIntroduction(id)
    Object.assign(form, res.data)

    visible.value = true
}

// onMounted(() => {
//     onDetail(id as string)
// })

defineExpose({ onDetail })
</script>

<style lang="scss" scoped>
.detail_content {
    .title {
        text-align: center;
    }

    .info {
        text-align: center;
    }

    .icon {
        margin-right: 3px;
    }
}
</style>